<template>
  <div @click="$emit('go-detail', carInfo.id)">
    <!-- 文章帖 -->
    <template v-if="articlePost">
      <ul v-if="carInfo.coverSize === 1" class="flex-ul-around">
        <li class="around-left">
          <h4 class="around-title-h4">{{ carInfo.title }}</h4>
          <p>{{ carInfo.updateTime | formatTime }}</p>
        </li>
        <li class="around-right">
          <img v-lazy="carInfo.coverImg[0]" class="around-li-img" alt="" />
        </li>
      </ul>
      <section v-if="carInfo.coverSize === 3" class="three-line">
        <h4>{{ carInfo.title }}</h4>
        <ul>
          <li
            v-for="(item, index) in carInfo.coverImg"
            :key="item.key"
            :class="{ isSecond: index === 1 }"
          >
            <img v-lazy="item" alt="" />
          </li>
        </ul>
      </section>
    </template>
    <!-- 视频帖 -->
    <template v-if="videoPost">
      <dl class="video-up-down">
        <dd>{{ carInfo.title }}</dd>
        <dt>
          <img v-lazy="carInfo.coverImg[0]" class="video-dt-img" alt="" />
          <img src="../assets/imgs/video.png" class="float-icon" alt="" />
        </dt>
      </dl>
    </template>
  </div>
</template>

<script>
export default {
  name: 'CarCard',
  props: {
    carInfo: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    articlePost() {
      return this.carInfo.postType === 1
    },
    videoPost() {
      return this.carInfo.postType === 2
    },
  },
}
</script>

<style lang="scss" scoped>
.flex-ul-around {
  display: flex;
  padding: 14px;
  border-bottom: 1px solid #f8f8f8;
  .around-left {
    flex: 1;
    position: relative;
    padding-right: 14px;
    .around-title-h4 {
      font-size: 15px;
      color: #333;
      line-height: 1.5em;
      font-weight: bold;
    }
    p {
      position: absolute;
      left: 0;
      bottom: 0;
      font-size: 13px;
      color: #999;
    }
  }
  .around-right {
    flex: 0 0 112px;
    height: 84px;
    .around-li-img {
      width: 100%;
      height: 100%;
      border-radius: 2px;
    }
  }
}
.video-up-down {
  padding: 14px;
  border-bottom: 1px solid #f8f8f8;
  dd {
    height: 28px;
    line-height: 28px;
    font-size: 15px;
    font-weight: bold;
    color: #333;
  }
  dt {
    position: relative;
    height: 194px;
    .video-dt-img {
      width: 100%;
      height: 100%;
      border-radius: 2px;
    }
    .float-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 48px;
      height: 48px;
      transform: translate(-50%, -50%);
    }
  }
}
.three-line {
  padding: 14px;
  border-bottom: 1px solid #f8f8f8;
  h4 {
    line-height: 24px;
    font-size: 15px;
    font-weight: bold;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  ul {
    display: flex;
    height: 84px;
    margin-top: 8px;
    li {
      flex: 1;
      img {
        width: 100%;
        height: 100%;
        border-radius: 2px;
      }
    }
    .isSecond {
      padding: 0 4px;
    }
  }
}
</style>
